<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="../../app/bower_components/ngImgCrop/compile/unminified/ng-img-crop.css" rel="stylesheet">
    <style>
        .cropArea {
            background: #E4E4E4;
            overflow: hidden;
            width:500px;
            height:350px;
        }
        form .progress {
            line-height: 15px;
        }
        .progress {
            display: inline-block;
            width: 100px;
            border: 3px groove #CCC;
        }
        .progress div {
            font-size: smaller;
            background: orange;
            width: 0;
        }
    </style>
</head>

<body ng-app="fileUpload" ng-controller="MyCtrl">
<form name="myForm">
    <div>Crop Image and Upload</div>
    <button ngf-select ng-model="picFile" accept="image/*">
        Select Picture</button>
    <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
         class="cropArea">
        <img-crop image="picFile  | ngfDataUrl"
                  result-image="croppedDataUrl" ng-init="croppedDataUrl=''" area-type="square">
        </img-crop>
    </div>
    <div>
        <img ng-src="{{croppedDataUrl}}" />
    </div>
    <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button>

        <span class="progress" ng-show="progress >= 0">
          <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
        </span>
    <span ng-show="result">Upload Successful</span>
    <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</form>



<script src="../../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../../app/bower_components/angular/angular.js"></script>
<script src="../../app/bower_components/ngImgCrop/compile/unminified/ng-img-crop.js"></script>
<script src="../../app/bower_components/ng-file-upload/ng-file-upload.js"></script>

<script>
    //inject ngFileUpload and ngImgCrop directives and services.
    var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);

    app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
        $scope.upload = function (dataUrl, name) {
            console.log(name);
            console.log(dataUrl);
            Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {
                    file: Upload.dataUrltoBlob(dataUrl, name)
                },
            }).then(function (response) {
                $timeout(function () {
                    $scope.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) $scope.errorMsg = response.status
                        + ': ' + response.data;
            }, function (evt) {
                $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
            });
        }
    }]);

</script>
</body>
</html>